<template>
  <div class="content">
    <a-table
      :pagination="false"
      :columns="columns"
      :data="data"
      :bordered="true"
      :stripe="true"
    >
      <template #columns>
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="供应商名称"
          data-index="name"
          :width="100"
          align="center"
        ></a-table-column>
        <a-table-column
          title="供应商编号"
          data-index="number"
          :width="100"
          align="center"
        ></a-table-column>
        <a-table-column
          title="级别"
          data-index="level"
          :width="100"
          align="center"
        ></a-table-column>
        <a-table-column
          title="单价"
          data-index="singlePrice"
          :width="100"
          align="center"
        ></a-table-column>
        <a-table-column
          title="单价"
          data-index="singlePrice"
          :width="100"
          align="center"
        ></a-table-column>
        <a-table-column title="是否为默认供应商" :width="100" align="center">
          <template #cell="{ record }">
            <!-- <a-button type="text" @click="setSupplierMark(record.productId)"
              >设为默认</a-button
            > -->{{ record.mark === 1 ? '是' : '否' }}
          </template></a-table-column
        >
        <a-table-column title="操作" :width="100" align="center">
          <template #cell="{ record }">
            <a-button
              type="text"
              :disabled="record.mark === 1"
              @click="setSupplierMark(record.productId)"
              >设为默认</a-button
            >
          </template></a-table-column
        >
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';

  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash';

  const route = useRoute();
  const managementId = Number(route.query.id);
  const props = withDefaults(
    defineProps<{
      data: any;
    }>(),
    {}
  );
  const emit = defineEmits(['setSupplierMark']);

  const setSupplierMark = async (productId: number) => {
    emit('setSupplierMark', { productId, managementId });
  };
</script>

<style scoped lang="less">
  .space {
    padding: 20px;
  }
  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
  }
</style>
